<!--继承 home.html-->
{% extends 'home.html' %}

<!--设置页面标题-->
{% block title %}CPGC智能助理——工作台{% endblock %}

<!-- 增加自己的css样式 -->
{% block extra_css %}
    <link rel="stylesheet" href="{% static 'css/file/file_list.css' %}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
{% endblock %}

<!--替换主内容区-->
{% block content %}
    <div class="header-bar">
        <h2>知识库——{{ knowbase_name }}</h2>
        <button id="triggerUpload" class="upload">
            上传文件
        </button>

        <!-- 隐藏的表单，默认不显示  独立出来，进行绝对定位 -->
        <div id="filePickerContainer" class="hidden">
            <input type="file" id="fileInput" style="display: none; ">
            <button id="customFileButton" class="custom-file-button">选择文件</button>
            <p id="fileName">未选择文件</p>
        </div>

        <div id="uploadButtonContainer" class="hidden">
            <button id="startUploadButton" class="file-upload-btn">开始上传</button>
        </div>

        <div id="cancelUploadContainer" class="hidden">
            <button id="cancelUploadButton" class="cancel-upload-btn">取消</button>
        </div>

        <!--文件上传后处理的进度-->
        <div class="status-container">
            <div class="status-header">
                <div>状态</div>
                <div>任务名称</div>
                <div style="text-align: right;">进度</div>
            </div>

            <div id="functionsList">
                <!-- 动态加载函数状态 -->
                <div class="function-item"  id="textTask">
                    <div class="status-indicator status-pending">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="function-name">文本处理</div>
                    <div class="status-text pending-text">等待中</div>
                </div>
                <div class="function-item"  id="imageTask">
                    <div class="status-indicator status-pending">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="function-name">图片处理</div>
                    <div class="status-text pending-text">等待中</div>
                </div>
                <div class="function-item" id="tableTask">
                    <div class="status-indicator status-pending">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="function-name">表格处理</div>
                    <div class="status-text pending-text">等待中</div>
                </div>
            </div>
            {#        <p id="fileNameDisplay">未选择文件</p>#}
        </div>
    </div>

    <!-- 知识库列表 -->
    {% if files %}
        <div class="file-list-container">
            {% for file in files %}
                <div class="file-item">
                    <!-- 文件图标 -->
                    <div class="file-icon">
                        <img src="{% static 'image/filetype-' %}{{ file.file_type|lower }}.svg"
                             alt="{{ file.file_type }}"
                             onerror="this.src='{% static 'image/filetype-unknown.svg' %}'"
                             width="32" height="32">
                    </div>

                    <!-- 文件信息 -->
                    <div class="file-info">
                        <div class="file-name">{{ file.file_name }}</div>
                        <div class="file-meta">
                            类型: {{ file.file_type | upper }} |
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="file-actions">
                        <a href="{% url 'textvector-list' %}?file_id={{ file.file_id }}" class="btn-detail">详情</a>
                        <button class="btn-delete"
                                onclick="deleteFile('{{ file.file_id }}', '{{ file.file_name }}')">
                            删除
                        </button>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- 分页控件 -->
        <div class="pagination">
            {% if page_obj.has_previous %}
                <a href="?knowbase_id={{ knowbase_id }}&page={{ page_obj.previous_page_number }}"
                   class="btn-page">上一页</a>
            {% else %}
                <span class="btn-page disabled">上一页</span>
            {% endif %}

            <span class="page-info">
            第 {{ page_obj.number }} 页，共 {{num_pages }} 页
        </span>

            {% if page_obj.has_next %}
                <a href="?knowbase_id={{ knowbase_id }}&page={{ page_obj.next_page_number }}"
                   class="btn-page">下一页</a>
            {% else %}
                <span class="btn-page disabled">下一页</span>
            {% endif %}
        </div>

    {% else %}
        <p class="no-data">暂无文件数据。</p>
    {% endif %}

{% endblock %}

{% block extra_js %}
    <script> const KNOWBASE_NAME = "{{knowbase_name}}" </script>
    <script> const FILE_DELETE_URI = "{% url 'file-delete' %}";</script>
    <script> const FILE_UPLOAD_URI = "{% url 'file-upload' %}";</script>
    <script src="{% static 'js/file/file_delete.js' %}"></script>
    <script src="{% static 'js/file/file_upload.js' %}"></script>
{% endblock %}